<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{log_name} : {log_account_no}</title>
<link rel="shortcut icon" href="{dir_image}favicon.ico">
<link rel="stylesheet" type="text/css" href="{dir_css}Global.css" />
<link rel="stylesheet" type="text/css" href="{dir_css}Popup.css" />
<link rel="stylesheet" type="text/css" href="{dir_css}Dean.css" />
<link rel="stylesheet" type="text/css" href="{dir_css}Registrar.css" />

<script type="text/javascript" src="{dir_js}jquery.min.js"></script>
<script type="text/javascript" src="{dir_js}Global.js"></script>
</head>

<body>
<!-- POPUP -->{page_popup}<!-- POPUP END -->
<!-- TOP HEADER -->{page_header}<!-- TOP HEADER END -->
	<div class="main-content">
	
		<table width="0" border="0" cellspacing="0" cellpadding="0">
			<tr valign="top" align="left">
				<td width="220">
					{reg_sub_menu}
				</td>
				<td width="755">
					<div class="page-sub-content">
						<div class="float-right-back"><a href="?page=Students"><img src="{dir_image}icon/back.png" border="0" class="cursor-pointer"/></a></div>	
						<div class="ann-top-label">Payment Records</div>
						<table width="0" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td class="reg-student-enroll-td" width="110"><strong>Student #</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{stud_no}</td>
							</tr>
							<tr>
								<td class="reg-student-enroll-td"><strong>Name</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{last_name} {first_name} {middle_name}</td>
							</tr>
							<tr>
								<td class="reg-student-enroll-td"><strong>Department</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{dept_desc}</td>
							</tr>
							<tr>
								<td class="reg-student-enroll-td"><strong>Course</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{course_desc}</td>
							</tr>
							<tr valign="top">
								<td class="reg-student-enroll-td"><strong>Semester</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{current_sem}</td>
							</tr>
							<tr valign="top">
								<td class="reg-student-enroll-td"><strong>Tuition Fees</strong></td>
								<td class="reg-student-enroll-td">:</td>
								<td class="reg-student-enroll-td">{fees}</td>
							</tr>
							<tr>
								<td colspan="2"></td>
								<td><div class="enrollment-more-details"  onclick="popupRequest('show', 'StudentProfile', 'Student Profile', '390', '500', '{stud_id}');">More Details</div></td>
							</tr>
						</table>
						
						<div class="div-reg-pointer" id="click_type_reg_transfer"></div>
						<input type="hidden" id="fullamount" value="{fullamount}"/>
						<input type="hidden" id="balance" value="{fullamount}"/>
						<input type="hidden" id="active_sem" value="{active_sem}"/>
						<input type="hidden" id="stud_id" value="{stud_id}"/>
						<input type="hidden" id="course_id" value="{course_id}"/>
						<form method="post" enctype="multipart/form-data" action="" >
							<div class="enrollment-popup" id="view_enrollment_popup"><!--  display-none -->
									<div id="payment_input">
										<table width="" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td height="32" width="80">Amount<span class="required-field">*</span></td>
												<td width="10">:</td>
												<td>
													Php <input type="text" name="txtamount" id="txtamount" class="course-text-input" onkeypress="return numberDate(event, false);"/>
													<input type="hidden" id="fullpayment" value="P"/>
													<img src="{dir_image}icon/checkbox_check.png" class="cursor-pointer" border="0" id="imgpayment2" onclick="fullPayment();"/> INSTALLMENT
													&nbsp;&nbsp;<img src="{dir_image}icon/checkbox_disable.png" class="cursor-pointer" border="0" id="imgpayment" onclick="fullPayment();"/> CASH
													&nbsp;&nbsp;<div class="subj-year-semester-button button-fee-top" onclick="paymentSave();">&nbsp;&nbsp;Save&nbsp;</div>
												</td>
											</tr>
										</table>
									</div>
									<div class="payment-history-label">Payment History</div>
									<div id="payment_history"></div>
									<div class="payment-history-label">BALANCE: <span id="balance_payment"></span></div>
							</div>
						</form>
					</div>
				</td>
			</tr>
		</table>
		
	</div>
<!-- FOOTER -->{page_footer}<!-- FOOTER -->
<script type="text/javascript">
	
	$(document).ready(function() {
		paymentHistory();
	});
	
	function fullPayment() {
		var fullpayment = $('#fullpayment');
		
		if ( fullpayment.val() == 'F' ) {
			$('#imgpayment').attr('src', "{dir_image}icon/checkbox_disable.png");
			$('#imgpayment2').attr('src', "{dir_image}icon/checkbox_check.png");
			fullpayment.val('P');
			$('#txtamount').val('');
		}
		else {
			$('#txtamount').val($('#balance').val());
			$('#imgpayment').attr('src', "{dir_image}icon/checkbox_check.png");
			$('#imgpayment2').attr('src', "{dir_image}icon/checkbox_disable.png");
			fullpayment.val('F');
		}
		
	}
	
	function paymentSave() {
		var active_sem  = $('#active_sem');
		var stud_id 	= $('#stud_id');
		var course_id 	= $('#course_id');
		var amount 		= $('#txtamount');
		var fullpayment = $('#fullpayment');
		if ( amount.val() != '' ) {
			$.post('request.php', {AJAXPost:'SavePayment', active_sem:active_sem.val(), stud_id:stud_id.val(), course_id:course_id.val(), amount:amount.val(), method:fullpayment.val()}, function(r) {
				paymentHistory();
			});
		}
		else {
			alert('Please input valid amount.');
		}
	}
	
	function paymentHistory() {
		var active_sem  = $('#active_sem');
		var stud_id 	= $('#stud_id');
		var course_id 	= $('#course_id');
		var payment_history = $('#payment_history');
		var payment_mode;
		var amountValue = 0;
		var amountCount = 0;
		
		if ($('#fullamount').val() != '') {
			$.post('request.php', {AJAXPost:'PaymentHistory', active_sem:active_sem.val(), stud_id:stud_id.val(), course_id:course_id.val()}, function(r) {
				payment_history.html('');
				$.each(r, function(key, value) {
					if ( value['payment_mode'] == 'F' ) {
						payment_mode = "Full Payment";
						amountCount++;
					}
					else {
						payment_mode = "Partial Payment";
					}
					payment_history.append('<div class="reg-fee-enroll payment-history-amount"><div class="reg-fee-enroll-value">Php ' + value['amount'] + '</div><div class="reg-fee-enroll-label">' + payment_mode + '</div></div>');
					amountValue += parseInt(value['amount']);
				});
				if ( amountValue >= $('#fullamount').val() || amountCount > 0 ) {
					$('#payment_input').hide();
					$('#balance_payment').text('Php 0.00');
				}
				else {
					var balance = (parseInt($('#fullamount').val()) - parseInt(amountValue));
					$('#balance_payment').text('Php ' + balance + '.00');
					$('#balance').val(balance);
				}
				$('#txtamount').val('');
			}, 'json');
		}
		else {
			$('#payment_input').hide();
		}
	}
	
</script>
</body>
</html>
